Skip to content
Nano Kit

Getting Started

@nano_kit/query is a small and powerful remote data manager for @nano_kit/store state manager.

  • Small. Minimal footprint with tree-shakable architecture.
  • Type-safe. Full TypeScript support with type inference for queries and mutations.
  • Signal-based. Built on top of @nano_kit/store’s reactive signals for automatic UI updates.
  • Flexible. Supports queries, infinite queries, mutations, and operations with cache management.
  • Extensible. Customizable with settings and extensions.

Installation

Section titled “Installation”

Install the package using your favorite package manager:

pnpm add @nano_kit/store @nano_kit/query

Quick Start

Section titled “Quick Start”

Here is a minimal example demonstrating reactive data fetching with automatic cache management:

import { signal, effect } from '@nano_kit/store'
import { queryKey, client } from '@nano_kit/query'


/* Define a cache key for your data */
const PostKey = queryKey<[postId: number], Post | null>('post')


/* Create a signal with the post ID to fetch */
const $postId = signal(1)


/* Create a query client */
const { query } = client()


/* Create a reactive query */
const [$post, $postError, $postLoading] = query(PostKey, [$postId], postId => fetch(`/api/posts/${postId}`).then(r => r.json()))


/* React to data changes (mounting $post triggers data fetching) */
const unsub = effect(() => {
  if ($postLoading()) {
    console.log('Loading...')
  } else if ($postError()) {
    console.log('Error:', $postError())
  } else {
    console.log('Post:', $post())
  }
})
// Loading...
// Post: { id: 1, title: 'First Post', ... }


/* Update triggers automatic refetch */
$postId(2)
// Loading...
// Post: { id: 2, title: 'Second Post', ... }


/* Cleanup: removes listener and stops data fetching */
unsub()

Next Steps

Section titled “Next Steps”

Now that you have the basics, explore more advanced features: